<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <p class="p1">
            <a class="bd" href="#">跳到百度</a>
        </p>
        <p class="p2">
            不凡学院
        </p>
    </div>

    <ul>
        <li>li_1</li>
        <li>li_2</li>
        <li class="item">li_3</li>
        <!-- 这是个注释 -->
        <li>li_4</li>
        <li>li_5</li>
    </ul>
    <script>
        var bd = document.getElementsByClassName('bd')[0];

        // 获取父元素
        console.log(bd.parentNode);

        // 获取兄弟元素
        var li3 = document.getElementsByClassName('item')[0];

        console.log(li3.nextSibling); // 回车符
        console.log(li3.nextElementSibling); // 下一个 元素  节点 (常用)


        // 为了获取下一个**元素节点**，我们可以这样做：
        // 在 IE678 中用 nextSibling，在火狐谷歌 IE9+以后用 nextElementSibling，于
        // 兼容写法
        var next = li3.nextElementSibling || li3.nextSibling;



        // 上一个 兄弟    
        var pre = li3.previousElementSibling || li3.previousSibling;


        // 获取 除自己以外的 所有兄弟 (没有现成的属性)


        // 如何获取子元素
        var ulEl = document.getElementsByTagName('ul')[0];

        // 获取单个子元素  

        var first = ulEl.firstElementChild || ulEl.firstChild;
        var last = ulEl.lastElementChild || ulEl.lastChild;


        // 获取所有子元素
        var children = ulEl.children; // 元素节点
        console.log(children);
        console.log(ulEl.childNodes); // [text, li, text, li, text, li.item, text, comment, text, li, text, li, text]

        // 封装一个 获取 所有子元素的 方法 
        // nodeType  属性值 可以知道  他的 节点类型

        // 1  元素节点
        // 3  文本节点
        // 8   注释节点
        function myChildren(el){
            // el代表 父元素
            var children = el.childNodes; // 子元素 有可能包含注释节点
            var temp = [];
            // 需要把注释节点 删除掉
            for(var i =0;i<children.length;i++){
                // 注释删掉
                // console.dir(children[i]);

                if(children[i].nodeType == 1){
                    temp.push(children[i])
                }
                // if(children[i].nodeType == 8){
                //     // 行不通,children 不是数组
                //     // children.splice(i,1);
                //     // i--;

                //     // 不 push
                // }
            }
            return temp;
        }

        console.log(myChildren(ulEl));
    </script>
</body>
</html>